<template>
  <view class="teamcenter">
    <view class="porserSearch">
      <view class="fixbg flex flex-align flex-bt">
        <view class="searchbox flex flex-align flex-bt">
          <view class="searchicon flex flex-align">
            <view class="ids" style="margin-top: -2rpx;">
              <picker @change="bindPickerChange" confirm-button-color="#FE7431" :value="index" :range="array">
                <view class="left flex flex-align flex-bt">
                  <view class="">{{array[index]}}</view>
                </view>
              </picker>
            </view>
            <image src="@/static/team/team22.png" mode="scaleToFill" />
          </view>
          <view class="search flex flex-align">
            <image src="@/static/team/team23.png" mode="scaleToFill" />
            <input type="text" placeholder="输入关键词搜索" />
            <view class="btns">搜索</view>
          </view>
        </view>
        <view class="flex flex-align selectTime">
          <image src="@/static/team/team03.png"  mode="scaleToFill" @click="openDatePicker" />
          <view class="date-picker">
            <uni-datetime-picker
              v-model="dateRange"
              type="daterange"
              ref="datePickerRef"
              returnType="timestamp"
              @change="onDateChange"
              @confirm="onDateConfirm"
              @cancel="onDateCancel"
              :show="showDatePicker"
              @close="showDatePicker = false"
            ></uni-datetime-picker>
          </view>
        </view>
        
      </view>
      
      <view style="height: 110rpx;"></view>
    </view>
    
    <view class="porser">
      <view class="list bgRadius boxshadow flex flex-align flex-bt" v-for="(item,index) in 10" :key="index">
        <view class="centeruser flex flex-align">
          <image src="@/static/logo.png" mode="scaleToFill" />
          <view class="centerright">
            <view class="name one-omit">一只会费的主</view>
            <view class="id">ID：1998751</view>
            <view class="phone">手机号：19919988991</view>
          </view>
        </view>
        <view class="right">
          <view class="listTitle">-¥50.00</view>
          <view class="listNum">2022/08/21 21:34</view>
        </view>
      </view>
    </view>
    
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue'
const type = ref(0)
const array = ['用户手机号', '商品名称', '订单号'];
const index = ref(0);
const datePickerRef = ref();
const bindPickerChange = (e:any) => {
  index.value = e.detail.value;
};
const dateRange = ref([]);
const showDatePicker = ref(false);
function openDatePicker() {
  datePickerRef.value.show();
  // showDatePicker.value = true;
}
// 日期选择器 change 事件处理函数
const onDateChange = (e: any) => {
  console.log('日期选择器 change:', e);
};

// 日期选择器 confirm 事件处理函数
const onDateConfirm = (e: any) => {
  console.log('日期选择器 confirm:', e);
};

// 日期选择器 cancel 事件处理函数
const onDateCancel = (e: any) => {
  console.log('日期选择器 cancel:', e);
};
onLoad((e:any) => {
  type.value = e.type
  uni.setNavigationBarTitle({
    title: e.name
  })
})
</script>

<style scoped lang="scss">
.porserSearch{
  
  .fixbg{position: fixed;top: 0;width: 100%;left: 0;box-sizing: border-box;z-index: 11;background: #F5F6F7;padding: 30rpx 30rpx 0;
    image{width: 48rpx;height: 48rpx;margin-left: 10rpx;}
    .selectTime{position: relative;
      .date-picker{position: absolute;z-index: 11;top: 0;left: 1000rpx;}
    }
  }
  .searchbox{background: #FE7431;border-radius: 56rpx;
    .searchicon{padding:0 10rpx 0 30rpx;
      .ids{font-size: 24rpx;color: #fff;}
      image{width: 32rpx;height: 32rpx;}
   }
   .search{background: #fff;border-radius: 60rpx;flex: 1;padding: 10rpx 0;border: 2px solid #FE7431;
     image{width: 48rpx;height: 48rpx;margin: 0 10rpx;}
     input{flex: 1;height: 56rpx;font-size: 26rpx;}
     .btns{color: #FE7431;padding: 0 20rpx;font-weight: bold;}
   }
   
 }
}
.uni-picker-container .uni-picker-action.uni-picker-action-confirm {
  color: #FF0000; /* App平台的红色按钮 */
}
.teamcenter{padding-bottom: 4rpx;}
  .list{margin: 30rpx;padding: 30rpx;
    image{width: 120rpx;height: 120rpx;border-radius: 100%;margin-right: 16rpx;}
    .centeruser{color: #323233;
      .name{font-size:28rpx;font-weight: 600;width: 270rpx;}
      .id{margin-right: 0;font-size: 24rpx;color: #969799;margin: 10rpx 0;}
      .phone{font-size: 24rpx;color: #969799;}
    }
    .right{text-align: right;
      .listTitle{font-size: 36rpx;color: #FE7431;}
      .listNum{font-size: 24rpx;color: #969799;margin-top: 10rpx;}
    }
  }
  
</style>